<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <button @click="addCount">addCount</button>

    <p>{{ person }}</p>
    <button @click="changeAge">changeAge</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref } from 'vue';

/*
  使用ref方法来创建响应式数据：
    - 接收一个内部值，返回一个响应式的、可更改的 ref 对象
    - 此对象只有一个指向其内部值的属性 .value
    - 它是响应式的，即所有对 .value 的操作都将被追踪
    - ref创建的响应式数据在模板中使用的时候不需要添加.value，在setup中进行操作数据的时候要添加.value

  使用ref方法的类型现在
    - ref方法接收一个泛型，可以传递内部value数据的类型
*/

const count = ref<number>(1);

console.log(count);
const addCount = () => {
  count.value++;
};

interface personType {
  name: string;
  age: number;
  sex: string;
  height?: number;
}

const person = ref<personType>({
  name: '王伟伦',
  age: 20,
  sex: '男',
});

console.log(person);
const changeAge = () => {
  person.value.age++;
};
</script>
<style></style>
